<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <style type="text/css">
    body{
        padding:0px 100px;   /*若想两边留空白，改成0px 300px*/
        /*background-color:aqua;*/
        background-image: url("plane.jpg");
        position: relative;
    }
    #ground
    {
        position: relative;
        background-color: beige;
        padding-left: 20px ;
        padding-top: 15px;
    }
    #header {
    background-color: darkblue;
    position: relative;
        height: 90px;
    }
    #kong
    {
        padding-left: 20px ;
        padding-top: 15px;
    }
    #kongkong
    {
        padding-left: 70px ;
    }
    #kongkong1
    {
        padding-left: 110px ;
        float:left;
    }
    .PlaneInformation{
        width:900px;
        top:0px;
        position: relative;
        padding-left: 20px ;
        padding-top: 15px;
    }
    #flightbooking {
    color:cornflowerblue;
    }
    #choose{
    text-align: right;
    }
    h3#information{
        background-color:lightblue;
    }
    p#small{
        font-size: 12px;
    }
    #big{
        font-size: 20px;
        padding:100px;
    }
    #min{
        font-size: 14px;
        padding:105px;
    }
    #smaller{
        border:1px solid #000;
        height:210px;
        width: 880px;
    }
    #final{
        border:1px solid #000;
        height:150px;
        width: 1200px;
        padding-left: 20px ;

    }
    #smallest{
        border:1px #000;
        height:30px;
        width: 880px;
        background-color:lightgrey;
    }
    #boomest{
        border:1px #000;
        height:30px;
        width: 280px;
        background-color:lightgrey;
    }

    #finally{
        text-align: center;
    }

    #name{
        position: relative;
        left:380px;
        top:-22px;
        border:1px dashed #000;
        height:20px;
        width: 500px;
        background-color:lightgrey;
    }
    #boom{
        position: absolute;
        top:200px;
        right:20px;
       height:310px;
        
        width:280px;
        border: 1px solid #666666;
    }
    input[type="checkbox"] + label {
    cursor: pointer;
    font-size: 1em;
    }
    [id^="checkbox-"] + label {
        background-color:lightblue;
        border: 1px solid #666666;
        padding: 7px;
        display: inline-block;
        vertical-align:middle;
    }
   </style>
</head>
<body>
    <div id="ground">
    <div id="header">
    <p id="kong"><font size="10" color="white">联盟 </font><span><span><font size="12" color="red">.</font><span><span><font size="10" color="white">机票</font></span></p>
    </div>
    <div id="flightbooking">
    <p>&nbsp&nbsp机票预订</p><hr/>
    </div>
    <div id="boom">
        <div id="boomest">
            <a>&nbsp&nbsp&nbsp♥&nbsp&nbsp&nbsp贴心提示</a>
        </div>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp航班查询</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp机票价格</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp支付方式</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp配送方式</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp行程单/报销凭证/发票</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp订单修改与取消</p>
        <p>&nbsp&nbsp&nbsp.&nbsp&nbsp&nbsp乘机常识</p>
    </div>
<div class="PlaneInformation">
    <div id="choose">
        <p><font size="8" color="orange">。</font><font color="orange">选择---></font><font size="8" color="orange">。</font><font color="orange">预订---></font><font size="10" color="gray">。</font><font color="gray">核对---></font><font size="10" color="gray">。</font><font color="gray">支付---></font><font size="10" color="gray">。</font><font color="gray"></font><font color="gray">完成</font></p>               
    </div>
    <h3 id="information">|| 航班信息</h3>
    <div class="air" style="margin-top: 5px;">
      <a id="small">海南航空&nbsp&nbsp&nbsp</a>
      <a id="small">HU7718&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>
      <a herf="https://www.baidu.com"><font color="blue">[修改航班]&nbsp&nbsp&nbsp&nbsp&nbsp</font></a>
      <a herf="https://www.baidu.com"><font color="blue">[退 改 签]&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</font></a>
      <a id="small">2013年06月17日&nbsp&nbsp&nbsp</a>
      <a id="small">11:00&nbsp&nbsp&nbsp</a>
      <a id="small">周水子国际机场  --  起飞 &nbsp&nbsp ¥2200/成人&nbsp&nbsp&nbsp&nbsp</a>
      <a id="small">机型&nbsp</a>
      <a id="small">728&nbsp&nbsp&nbsp</a>
      <a herf="https://www.baidu.com"><font color="blue">经停&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</font></a>
      <a herf="https://www.baidu.com"><font color="blue">[修改舱位]&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</font></a>
      <a id="small">2013年06月17日&nbsp&nbsp&nbsp</a>
      <a id="small">15:00&nbsp&nbsp&nbsp</a>
      <a id="small">宝安国际机场  --  到达 &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp （含税费）&nbsp&nbsp&nbsp&nbsp</a>
      <hr></hr>
      <a><font size="3">总价：¥ 2200 （含税费）    人数：1人 &nbsp&nbsp&nbsp </font></a>
      <a herf="https://www.baidu.com"><font color="blue">机票明细</font></a>
    </div>
    <h3 id="information">|| 乘客信息&nbsp&nbsp&nbsp&nbsp<font size="1" color="red">请准确填写乘客信息    （姓名、证件号码）  ，  以免在办理登记手续时发生问题 。 </font></h3>
    <a><font size="3">&nbsp&nbsp&nbsp在常用姓名中搜索&nbsp&nbsp&nbsp&nbsp&nbsp</font></a>
    <input type="text">&nbsp&nbsp&nbsp&nbsp&nbsp
        <div id="name">
            <a>&nbsp&nbsp</a>
            <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
            <label for="checkbox-2"></label>
            <span class="status">刘某某&nbsp&nbsp</span>
            <a>&nbsp&nbsp</a>
            <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
            <label for="checkbox-2"></label>
            <span class="status">张某某&nbsp&nbsp</span>
            <a>&nbsp&nbsp</a>
            <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
            <label for="checkbox-2"></label>
            <span class="status">王某某&nbsp&nbsp</span>
            <a>&nbsp&nbsp</a>
            <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
            <label for="checkbox-2"></label>
            <span class="status">李某某</span>
            <a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>
            <select name="list" style="width: 80px; background-color: lightgrey;">
            <option value="more" selected>更多</option></select>
            
       </div>
        
       <div id="smaller">  
            <div id="smallest">
            <a>&nbsp&nbsp&nbsp&nbsp第一位乘机人：<font size="3"><b>刘某某</b></font></a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>
             <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
            <label for="checkbox-2"></label>
            <span class="status">保存常用姓名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
            </div>
            </br>
            <a id="kongkong"><font color="red">*</font>购票类型：</a>
            <select name="list" style="width: 200px;">
            <option value="成人票" selected>成人票</option></select>
            <a >&nbsp&nbsp&nbsp&nbsp&nbsp¥ 2200 / 成人（含税费）<font size="3" color="blue">&nbsp&nbsp退改签</font></a>
            </br></br>
            <a id="kongkong"><font color="red">*</font>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</a>
            <select name="list" style="width: 200px;">
            <option value="刘某某" selected>刘某某</option></select>
            <a>&nbsp&nbsp&nbsp&nbsp&nbsp<font size="3" color="blue">填写说明</font></a>
            </br></br>
            <a id="kongkong"><font color="red">*</font>证件类型：</a>
            <select name="list" style="width: 200px;">
            <option value="护照" selected>护照</option></select>
            </br></br>
            <a id="kongkong"><font color="red">*</font>证件类型：</a>
            <input type="text" style="width: 200px;" value="220603019764221539">
        </div> 
    </br>
        <div id="smaller">  
                <div id="smallest">
                <a>&nbsp&nbsp&nbsp&nbsp第二位乘机人：<font size="3"><b>王某某</b></font></a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a><a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</a>
                 <input type="checkbox" value="1" class="check_view_state"  id="checkbox-2" style="display: none;">
                <label for="checkbox-2"></label>
                <span class="status">保存常用姓名&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span>
                </div>
                </br>
                <a id="kongkong"><font color="red">*</font>购票类型：</a>
                <select name="list" style="width: 200px;">
                <option value="成人票" selected>成人票</option></select>
                <a>&nbsp&nbsp&nbsp&nbsp&nbsp¥ 2200 / 成人（含税费）<font size="3" color="blue">&nbsp&nbsp退改签</font></a>
                </br></br>
                <a id="kongkong"><font color="red">*</font>姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名：</a>
                <select name="list" style="width: 200px;">
                <option value="刘某某" selected>王某某</option></select>
                <a>&nbsp&nbsp&nbsp&nbsp&nbsp<font size="3" color="blue">填写说明</font></a>
                </br></br>
                <a id="kongkong"><font color="red">*</font>证件类型：</a>
                <select name="list" style="width: 200px;">
                <option value="护照" selected>护照</option></select>
                </br></br>
                <a id="kongkong"><font color="red">*</font>证件类型：</a>
                <input type="text" style="width: 200px;" value="220603019764221539">
        </div>
            <p><font size="3" color="blue">增加乘客</font></p>
            <h3 id="information">|| 联系人信息&nbsp&nbsp&nbsp&nbsp<font size="1" color="red">请您准确填写联系人信息   （联系人、手机号码、E-mail）  ，  以便我们与您联系 。 </font></h3>
            <a id="kongkong"><font color="red"></font>联&nbsp&nbsp系&nbsp&nbsp人：</a>
            <input type="text" style="width: 200px;" >
            </br></br>
            <a id="kongkong"><font color="red"></font>手机号码：</a>
            <input type="text" style="width: 200px;">
            </br></br>
            <a id="kongkong"><font color="red"></font>联系电话：</a>
            <input type="text" style="width: 47px;" value="区号">
            <input type="text" style="width: 90px;" value="电话号码">
            <input type="text" style="width: 47px;" value="分机">
            </br></br>
            <a id="kongkong"><font color="red"></font>传真号码：</a>
            <input type="text" style="width: 47px;" value="区号">
            <input type="text" style="width: 90px;" value="电话号码">
            <input type="text" style="width: 47px;" value="分机">
            </br></br>
            <a id="kongkong"><font color="red"></font>E-mail：</a>
            <input type="text" style="width: 200px;">
            </br></br>
            <a id="kongkong"><font color="red"></font>联系地址：</a>
            <input type="text" style="width: 200px;">
            </br></br><hr></hr>
            
            <div id="kongkong1"><button type="button" >上一步</button></div>
            <div id="kongkong1"><button type="button" style="background-color: orange;">下一步</button></div>
        </br></br>
</div></br></br>
    <div id="final">
        <a id="big"><u><b>新手指南</b></u></a>
        <a id="big"><u><b>支付方式</b></u></a>
        <a id="big"><u><b>品质服务</b></u></a>
        <a id="big"><u><b>帮助信息</b></u></a>
        <br></br>
        <a id="min">预定步骤</a>
        <a id="min">在线支付</a>
        <a id="min">退改签说明</a>
        <a id="min">免费邮寄行程单/保险发票</a>
        <br></br>
        <a id="min">订单查询</a>
        <a id="min">开通财付通</a>
        <a id="min">行程单配送方式</a>
        <p id="min"></p>
    </div>
    <div id="finally">
        <p>关于我们 | 联系我们 | 用户协议 | 帮助信息</p>
        <p> Copyright 2012 商家联盟 版权所有 辽ICP备09013204号-2</p>
    </div>
    
</div>
</body>
</html>